<template>
	<view :class="'container  ' + (mode_ === 'night' ? 'night' : '')" 
	style="background-image: url('/static/assets/bg.png')">
		<view class="notify">
			<van-notify id="van-notify" />
		</view>
		<view class="banner" >
			<div class="top-banner">
				<image src="/static/assets/homebanner.png" mode="center"
					class="banner-img"></image>
				<text class="banner-text bottom left">Keep on going never give up.</text>
				<text class="banner-text top right">{{ year }}.{{ month }}</text>
			</div>
		</view>
		<view class="w-search">
			<input class="w-input" placeholder="搜索单词"  @tap="toSearchDetail" :disabled="true" />
			<van-icon name="search" class="w-search-icon"  @tap.native="toSearchDetail"/>
		</view>
		<view class="w-devider"></view>
		<view class="bck" style="background-image: url('/static/assets/bj.png')">
			<view class ="tpbanner">
				<view class ="tpbanner-item" >
					<view>新词</view>
					<view>50</view>
				</view>
				<view class ="tpbanner-item" >
					<view>复习</view>
					<view>100</view>
				</view>
				<view class ="tpbanner-item" >
					<view>未学</view>
					<view>150</view>
				</view>				
			</view>
			<view class="wordBtn" @tap="toWords">开始背词</view>
		</view>
		
		<view class="nav">
			<image class="iconsub" @tap=toWordBook src="/static/assets/beici.png"></image>
			<view class="nav-btn" >
				<text>单词本</text>
			</view>
			<image class="iconsub" @tap= "toreview" src="/static/assets/fuxi.png"></image>
			<view class="nav-btn">
				<text>复习</text>
			</view>
			<image class="iconsub" @tap="onDisplay" src="/static/assets/daka.png"></image>
			<view class="nav-btn" >
				<text>打卡</text>
			</view>
		</view>
		<van-calendar :show="show" confirm-text="打卡" readonly @close="onClose"
		@confirm="onConfirm":dakaDate="dakaDays" />
<!-- 		<idea title="好句推荐" :ideaList="sentenceInfo" :type="1"></idea>
		<idea title="今日阅读" :ideaList="articleInfo" @click="toArticleDetail">
			<view @tap="toArticle">更多></view>
		</idea> -->
	</view>
</template>

<script>
	// import vanIcon from '@/miniprogram_npm/@vant/weapp/icon/index';
	import idea from '@/component/idea/index';
	import jumpTo from '../../utils/jumpTo';
	import Notify from '@/static/miniprogram_npm/@vant/weapp/notify/notify';
	import {
		getArticle
	} from '../../service/article.service';
	import {
		createStoreBindings
	} from '@/static/miniprogram_npm/mobx-miniprogram-bindings';
	import {
		store
	} from '../../store/store';
	export default {
		components: {
			idea
		},
		data() {
			return {
				articleInfo: [],
				year: 2000,
				month: 1,
				date: 1,
				mode_: 'day',
				show: false,
				// date: 0,
				dakaDays: [],
				articleInfo: {},
				
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.storeBindings = createStoreBindings(this, {
				store,
				field: ['mode', 'openID'],
				actions: ['getMode', 'getOpenID']
			});

			const now = new Date();
			const month = now.toDateString().split(' ')[1];
			const date = now.getDate();
			const year = now.getFullYear();
			this.setData({
				month,
				year,
				date
			});
			
			let dakaDays = uni.getStorageSync('daka');
			let localToMonth = uni.getStorageSync('toMonth');
			
			if (localToMonth === '') {
				uni.setStorageSync('toMonth', toMonth);
			}
			
			if (dakaDays === '') {
				dakaDays = [];
				uni.setStorageSync('daka', dakaDays);
				return;
			}
			
			let daate = new Date(); // let today = new Date().getDate();
			
			let toMonth = uni.getStorageSync('toMonth');
			let toMonth_ = daate.getMonth();
			
			if (toMonth != toMonth_) {
				console.log('本月第一次打开该页面');
				uni.setStorageSync('daka', []);
				dakaDays = [];
				uni.setStorageSync('toMonth', toMonth_);
			}
			
			this.setData({
				dakaDays
			});
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			this.setData({
				mode_: this.getMode()
			});
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {
			this.storeBindings.destroyStoreBindings();
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {
			onDisplay() {
				this.show=true;
			},
			
			onClose() {
				this.show=false;
			},
			
			onConfirm(event) {
				// console.log(this.data.dakaDays)
				this.setData({
					show: false,
					date: this.formatDate(event.detail)
				});
				let dakaDays = this.dakaDays;
				let date = new Date().getDate();
			
				if (!dakaDays[date]) {
					dakaDays[date] = true;
					uni.setStorageSync('daka', dakaDays);
				}
			
				this.setData({
					dakaDays
				});
				Notify({
				message: '打卡成功',
				color: '#dd0000',
				type: 'success',
				duration: 800
				});
			},

			formatDate(date) {
				date = new Date(date);
				return date.getDate();
			},



			toSearchDetail(e) {
				const openID = this.getOpenID(); 

				jumpTo('../../pages-home/pages/searchDetail/index?openID=' + openID);
			},



			toWords() {
				const openID = this.getOpenID();
				jumpTo(`../../pages-home/pages/word/index?openID=${openID}`);
			},


			toWordBook() {
				const openID = this.getOpenID();
				jumpTo('../../pages-home/pages/wordBook/index?openID=' + openID);
			},
			toreview() {
				const openID = this.getOpenID();
				jumpTo('../../pages-home/pages/review/index?openID=' + openID);
			}
		}
	};
</script>

<style>
	.top-banner {
		height: 200rpx;
		width: 92%;
		margin-left: 4%;
		position: absolute;
		border-radius: 40rpx;
		overflow: hidden;
		background-size:100% 100% ;
		/* clip:rect(20px,0px,20px,0px); */
	}

	.banner {
		width: 86%;
		margin: 0 auto;
		position: relative;
		height: 200rpx;
	}

	.banner-img {
		width: 110%;
		height: 100%;
	}

	.container {
		width: 100%;
		height:100%;
		position: relative;
		transition: all 0.5s;
	}

	.banner-text {
		position: absolute;
		color: white;
		z-index: 10;
	}

	.top {
		top: 20rpx;
	}

	.bottom {
		bottom: 20rpx;
	}

	.left {
		left: 40rpx;
	}

	.right {
		right: 20rpx;
	}

	.w-search {
		display: flex;
		margin-top: 20rpx;
		gap: 40rpx;
		justify-content: center;
		align-items: center;
	}

	.w-search-searchDetail {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		left: 20rpx;
	}

	.w-search-icon {
		border-radius: 200%;
		width: 2rem;
		height: 2rem;
		background-color: rgba(109, 235,60, 0.747);
	}

	.w-input {
		border-radius: 2rem;
		width: 75%;
		height: 3rem;
		line-height: 3rem;
		background-color: rgb(231, 230, 230);
		box-sizing: border-box;
		padding: 0 1.5rem;
	}

	.w-devider {
		margin-top: 20rpx;
		border-top: solid 2px #c4c9c8;
		width: 80%;
		margin: 30rpx auto 0 auto;
		box-sizing: border-box;
	}

	.wordBtn {
		width: 12rem;
		margin: 60rpx auto 0rpx auto;
		text-align: center;
		border-radius: 2rem;
		background-color: rgb(255, 255, 255);
		height: 3rem;
		line-height: 3rem;
		color: #036154;
		font-size: 1.15rem;
		/* justify-content:center; */
		
	}
	.tpbanner{
		width: 100%;
		display: flex;
		box-sizing: border-box;
		justify-content: space-around;
		padding: 10rpx 30rpx;
	}
	.tpbanner-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 1.1rem;
	}
	.bck{
		display: flex;
		flex-wrap:wrap;
		/* align-items:center; */
		height: 400rpx;
		border:2px solid;
		border-radius:25px;
		background-size:100% 100%;
		/* background-repeat:no-repeat; */
	}
	.nav {
		display: flex;
		align-items: center;
		height: 300rpx;
	}

	.nav-btn {
		flex: 100	;
		width: 20%;
		font-size: 0.8rem;
		text-align: center;
		position: relative;
		top:20px;
		left:-25px;
	}

	.night {
		background-color: black !important;
		color: #fff !important;
		filter: brightness(0.7);
	}
	.iconsub{
		position: relative;
		/* top:20px; */
		left:28px;
		height: 100rpx;
		width: 100rpx;
		margin-top: 0rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
	.notify {
			position: absolute;
			bottom: 0;
		}

</style>
